<template>
  <div>
    <el-container style="flex-wrap: wrap">
      <!-- 头部导航栏 -->
      <BreadHeader></BreadHeader>

      <!-- 主体内容部分 -->
      <XPannel>
        <template v-slot:header>
          <span>报修管理</span>
          <el-button
            type="primary"
            plain
            style="padding: 10px 20px; float: right"
            @click="applybtn"
            >报修申请</el-button
          >
          <el-button
            @click="download()"
            type="info"
            style="float: right; padding: 10px 15px; margin-right: 15px"
            >导出Excel</el-button
          >
        </template>

        <!-- 列表主体内容 -->
        <template v-slot:default>
          <!-- 搜索栏目 -->
          <el-form
            :model="searchruleForm"
            ref="searchruleForm"
            label-width="100px"
            class="demo-ruleForm"
            style="height: 125px"
          >
            <!-- 搜索栏--第一行 -->
            <el-row type="flex" :gutter="20">
              <el-col :span="7">
                <el-form-item label="手机号" prop="mobile">
                  <el-input
                    v-model="searchruleForm.mobile"
                    style="width: 80%"
                    placeholder="请输入手机号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="损坏位置" prop="position">
                  <el-input
                    v-model="searchruleForm.position"
                    style="width: 80%"
                    placeholder="请输入损坏位置"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="损坏信息" prop="emimf">
                  <el-input
                    v-model="searchruleForm.emimf"
                    style="width: 80%"
                    placeholder="请输入损坏信息"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 搜索栏--第二行 -->
            <el-row type="flex" :gutter="20">
              <el-col :span="7">
                <el-form-item label="用户类型" prop="urole">
                  <el-select
                    v-model="searchruleForm.urole"
                    placeholder="请选择用户类型"
                    clearable
                    style="width: 80%"
                  >
                    <el-option
                      v-for="(item, index) in all_role"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                    <!-- <el-option label="老师" value="2"></el-option> -->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="损坏类型" prop="emtype">
                  <el-select
                    v-model="searchruleForm.emtype"
                    placeholder="请选择损坏类型"
                    style="width: 80%"
                    clearable
                  >
                    <el-option label="自然损坏" value="1"></el-option>
                    <el-option label="人为损坏" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="报修状态" prop="status">
                  <el-select
                    v-model="searchruleForm.status"
                    placeholder="请选择报修状态"
                    style="width: 80%"
                    clearable
                  >
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="通过" value="1"></el-option>
                    <el-option label="处理中" value="2"></el-option>
                    <el-option label="完成" value="3"></el-option>
                    <el-option label="撤销" value="-1"></el-option>
                    <el-option label="不通过" value="-2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 搜索按钮 -->
            <el-button
              type="primary"
              @click="searchusers"
              style="position: relative; top: -90px; left: 85%"
              ><i class="el-icon-search"></i> 搜索</el-button
            >
            <el-button
              type="info"
              @click="reset"
              style="position: relative; top: -90px; left: 85%"
              >重置</el-button
            >
          </el-form>

          <!-- 报修申请-抽屉 -->
          <el-drawer
            title="报修申请"
            :visible.sync="dialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="40%"
          >
            <div class="demo-drawer__content">
              <el-form
                :model="form"
                ref="addForm"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="手机号" prop="mobile">
                  <el-input
                    v-model="form.mobile"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>

                <el-form-item label="报修类型" prop="emtype">
                  <el-select
                    v-model="form.emtype"
                    placeholder="请选择对应报修类型"
                    style="width: 300px"
                  >
                    <el-option label="自然损坏" value="1"></el-option>
                    <el-option label="人为损坏" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="报修地点" prop="position">
                  <el-input
                    v-model="form.position"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="报修详细" prop="emimf">
                  <el-input
                    v-model="form.emimf"
                    type="textarea"
                    :rows="3"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="预期时间" prop="extime">
                  <el-date-picker
                    v-model="form.extime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm"
                    placeholder="选择日期时间"
                    style="width: 300px"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="上传图片" prop="picture">
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                    :limit="3"
                    :on-change="handleUploadChange"
                    :on-remove="handleRemove"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>

                <el-form-item style="margin-top: 30px">
                  <el-button type="primary" @click="submitForm_add('addForm')"
                    >申请</el-button
                  >
                  <el-button @click="resetForm('addForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-drawer>

          <!-- 报修列表 -->
          <el-table
            ref="multipleTable"
            :data="repairelist"
            tooltip-effect="dark"
            style="width: 100%; margin: auto"
            @selection-change="handleSelectionChange"
            height="450"
            border
            v-loading="loading"
          >
            <el-table-column type="selection" width="50" fixed="left"></el-table-column>

            <el-table-column prop="id" label="ID" width="50" fixed="left"></el-table-column>
            <el-table-column label="报修用户" width="100" fixed="left">
              <template slot-scope="scope">
                <span v-if="!scope.row.uname">无姓名</span>
                <span v-else>{{ scope.row.uname }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="联系手机号"
              width="130"
            ></el-table-column>

            <el-table-column label="用户类型" width="100">
              <template slot-scope="scope">
                <span>{{ role_name(scope.row.submitter_role) }}</span>
                <!-- <span v-if="scope.row.type == 1">学生</span>
                <span v-else-if="scope.row.type == 2">老师</span> -->
              </template>
            </el-table-column>
            <el-table-column label="损坏类型" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.repairetype == 1" type="success"
                  >自然损坏</el-tag
                >
                <el-tag v-else-if="scope.row.repairetype == 2" type="danger"
                  >人为损坏</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="imf"
              label="损坏描述"
              width="250"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="position"
              label="损坏位置"
              width="130"
            ></el-table-column>
            <el-table-column
              prop="extime"
              label="预期处理时间"
              width="150"
            ></el-table-column>
            <el-table-column label="报修状态" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 0" type="info">待审核</el-tag>
                <el-tag v-else-if="scope.row.status == 1" type="success"
                  >通过</el-tag
                >
                <el-tag v-else-if="scope.row.status == 2" type="warning"
                  >处理中</el-tag
                >
                <el-tag v-else-if="scope.row.status == 3">完成</el-tag>
                <el-tag v-else-if="scope.row.status == -1" type="warning"
                  >撤销</el-tag
                >
                <el-tag v-else-if="scope.row.status == -2" type="danger"
                  >不通过</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="负责工人" width="110">
              <template slot-scope="scope">
                <span v-if="!scope.row.worker">暂未安排工人</span>
                <span v-else>{{ scope.row.worker }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="280" fixed="right">
              <template #default="scope">
                <el-button
                  @click="xiugaiobtain(scope.row)"
                  type="primary"
                  size="mini"
                >
                  <i class="el-icon-edit"></i>编辑
                </el-button>
                <el-button
                  type="danger"
                  @click="handleDelete(scope.row)"
                  size="mini"
                  ><i class="el-icon-delete"></i>删除</el-button
                >
                <el-button
                  @click="toworkerfn(scope.row)"
                  type="warning"
                  size="mini"
                  :disabled="scope.row.status < 1"
                >
                  <i class="el-icon-thumb"></i>指定工人
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 指定工人弹框 -->
          <el-dialog
            title="选择工人"
            :visible.sync="dialogFormVisible"
            width="500px"
          >
            <el-select
              v-model="value_worker"
              placeholder="请选择维修师傅"
              style="width: 300px"
              clearable
            >
              <el-option
                v-for="item in form_worker"
                :key="item.id"
                :label="item.uname"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="ent_worker">确 定</el-button>
            </div>
          </el-dialog>

          <!-- 批量操作 -->
          <div class="piliang" style="margin: 20px 0">
            <el-button
              type="danger"
              @click="batchDelete"
              :disabled="selected.length === 0"
              >批量删除</el-button
            >
            <el-button @click="toggleSelection()" type="primary"
              >取消选择</el-button
            >
          </div>

          <!-- 页码显示 -->
          <div class="block" style="text-align: center">
            <el-pagination
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalUsers"
              @size-change="handleChangeSize"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
            >
            </el-pagination>
          </div>

          <!-- 修改报修信息 -->
          <el-drawer
            title="修改报修信息"
            :visible.sync="editdialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer2"
            size="40%"
          >
            <div class="demo-drawer__content">
              <el-form
                :model="editform"
                :rules="rules"
                ref="saveEdit"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="手机号" prop="mobile">
                  <el-input
                    v-model="editform.mobile"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>

                <el-form-item label="报修类型" prop="emtype">
                  <el-select
                    v-model="editform.emtype"
                    placeholder="请选择对应报修类型"
                    style="width: 300px"
                  >
                    <el-option label="自然损坏" value="1"></el-option>
                    <el-option label="人为损坏" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="报修地点" prop="position">
                  <el-input
                    v-model="editform.position"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="报修详细" prop="emimf">
                  <el-input
                    v-model="editform.emimf"
                    type="textarea"
                    :rows="3"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="预期时间" prop="extime">
                  <el-date-picker
                    v-model="editform.extime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm"
                    placeholder="选择日期时间"
                    style="width: 300px"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-divider></el-divider>
                <div style="text-align: center; margin-bottom: 20px">
                  <el-button @click="revoke" plain type="danger"
                    >撤销</el-button
                  >
                  <el-button @click="no_pass" plain type="warning"
                    >不通过</el-button
                  >
                  <el-button @click="pass" plain type="success">通过</el-button>
                  <el-button @click="handling" plain type="info"
                    >处理中</el-button
                  >
                  <el-button @click="complete" plain type="primary"
                    >完成</el-button
                  >
                </div>

                <el-form-item style="text-align: center">
                  <el-button type="primary" @click="submitForm('saveEdit')"
                    >提交</el-button
                  >
                  <el-button @click="resetForm('saveEdit')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-drawer>
        </template>
      </XPannel>
    </el-container>
  </div>
</template>

<script>
import http from "@/api/http";
import XPannel from "@/components/XPannel.vue";
import * as XLSX from "xlsx";
import { mapState } from "vuex";
import BreadHeader from "@/components/BreadHeader.vue";

export default {
  components: {
    XPannel,
    BreadHeader,
  },
  computed: {
    ...mapState(["name", "picture"]),
    userName() {
      return this.name;
    },
    userPicture() {
      return this.picture;
    },
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      const pattern = /^1[3456789]\d{9}$/;
      if (!value) {
        callback(new Error("手机号不能为空"));
      } else if (!pattern.test(value)) {
        callback(new Error("请输入正确格式的手机号"));
      } else {
        callback();
      }
    };

    return {
      loading: false,
      dialog: false,
      editdialog: false,
      dialogFormVisible: false,

      form: {
        mobile: "",
        urole: null,
        emtype: null,
        position: "",
        emimf: "",
        extime: "",
        picture: [],
      },

      editform: {
        mobile: "",
        urole: null,
        emtype: null,
        position: "",
        emimf: "",
        extime: "",
        picture: [],
      },

      searchruleForm: {
        mobile: "",
        urole: null,
        emtype: null,
        position: "",
        emimf: "",
        status: null,
      },

      rules: {
        mobile: [{ validator: validatePhone, trigger: "blur" }],
        urole: [
          { required: true, message: "请选择角色类型", trigger: "change" },
        ],
        emtype: [
          { required: true, message: "请选择损坏类型", trigger: "change" },
        ],
        position: [
          { required: true, message: "请输入报修地点", trigger: "blur" },
          { min: 2, max: 50, message: "长度在2-50个字符", trigger: "blur" },
        ],
        emimf: [
          { required: true, message: "请输入损坏详细信息", trigger: "blur" },
          { min: 5, max: 200, message: "长度在5-200个字符", trigger: "blur" },
        ],
        extime: [
          { required: true, message: "请选择预期处理时间", trigger: "change" },
        ],
      },

      repairelist: [],
      totalUsers: 0,
      pageSize: 5,
      pageNum: 1,

      selected: [],
      multipleSelection: [],

      form_worker: [],
      value_worker: null,
      toworkerid: null,
      xiugaiobtain_id: null,

      fileList: [],
      all_role: [],
    };
  },

  methods: {
    // 用户角色
    async allrole() {
      try {
        const res = await http.get("/user/allRole");
        console.log(res);
        this.all_role = res.data;
      } catch (error) {
        console.log("代码逻辑有问题：", error);
      }
    },
    // 获取用户角色名称
    role_name(roleValue) {
      if (!this.all_role || !this.all_role.length) {
        return "未知角色";
      }

      // 确保比较的是相同类型
      const roleStr = String(roleValue);
      const role = this.all_role.find((item) => String(item.value) === roleStr);

      return role ? role.label : "未知角色";
    },
    // 导出Excel文件
    download() {
      this.loading = true;
      try {
        const data = this.repairelist.map((item) => ({
          ID: item.id,
          手机号: item.mobile,
          人员类型: item.type === 1 ? "学生" : "老师",
          损坏类型: item.repairetype === 1 ? "自然损坏" : "人为损坏",
          损坏描述: item.imf,
          损坏位置: item.position,
          预期处理时间: item.extime,
          报修状态: this.getStatusText(item.status),
          负责工人: item.uname || "暂未安排",
        }));

        const worksheet = XLSX.utils.json_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "报修列表");
        XLSX.writeFile(workbook, "报修列表.xlsx");

        this.$message.success("导出成功");
      } catch (error) {
        console.error("导出失败:", error);
        this.$message.error("导出失败");
      } finally {
        this.loading = false;
      }
    },

    getStatusText(status) {
      const statusMap = {
        0: "待审核",
        1: "通过",
        2: "处理中",
        3: "完成",
        "-1": "撤销",
        "-2": "不通过",
      };
      return statusMap[status] || "未知状态";
    },

    // 上传图片处理
    handleUploadChange(file, fileList) {
      this.form.picture = fileList;
    },

    handleRemove(file, fileList) {
      this.form.picture = fileList;
    },

    // 搜索功能
    searchusers() {
      this.loading = true;
      this.pageNum = 1;
      this.getRepairList();
    },

    // 重置搜索
    reset() {
      this.searchruleForm = {
        mobile: "",
        urole: null,
        emtype: null,
        position: "",
        emimf: "",
        status: null,
      };
      this.getRepairList();
    },

    // 获取报修列表
    getRepairList() {
      this.loading = true;

      // const params = {
      //   page: this.pageNum,
      //   page_size: this.pageSize,
      // };
      const params = {
        mobile: this.searchruleForm.mobile.trim(),
        urole: this.searchruleForm.urole,
        emtype: this.searchruleForm.emtype,
        position: this.searchruleForm.position.trim(),
        emimf: this.searchruleForm.emimf.trim(),
        sort: this.searchruleForm.status,
        page: this.pageNum,
        page_size: this.pageSize,
      };

      http
        .get("/baoxiu/list", { params })
        .then((res) => {
          this.repairelist = res.data.list || [];
          this.totalUsers = res.data.pagination.total || 0;
        })
        .catch((error) => {
          console.error("获取报修列表失败:", error);
          this.$message.error("获取报修列表失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 获取工人列表
    getWorkerList() {
      http
        .get("/baoxiu/people_list")
        .then((res) => {
          this.form_worker = res.data || [];
        })
        .catch((error) => {
          console.error("获取工人列表失败:", error);
        });
    },

    // 申请报修
    submitForm_add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.applyRepair();
        } else {
          return false;
        }
      });
    },

    applyRepair() {
      this.loading = true;

      const formData = new FormData();
      formData.append("mobile", this.form.mobile);
      formData.append("urole", this.form.urole);
      formData.append("emtype", this.form.emtype);
      formData.append("position", this.form.position);
      formData.append("emimf", this.form.emimf);
      formData.append("extime", this.form.extime);

      // 添加图片文件
      this.form.picture.forEach((file) => {
        formData.append("picture", file.raw);
      });

      http
        .post("/baoxiu/apply", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          console.log(res);
          this.$message.success("报修申请成功");
          this.dialog = false;
          this.resetForm("addForm");
          this.getRepairList();
        })
        .catch((error) => {
          console.error("报修申请失败:", error);
          this.$message.error("报修申请失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 打开报修申请抽屉
    applybtn() {
      this.dialog = true;
      this.$nextTick(() => {
        this.resetForm("addForm");
      });
    },

    // 修改提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveEdit();
        } else {
          return false;
        }
      });
    },

    // 保存修改
    saveEdit() {
      this.loading = true;

      const data = {
        mobile: this.editform.mobile,
        urole: this.editform.urole,
        emtype: this.editform.emtype,
        position: this.editform.position,
        emimf: this.editform.emimf,
        extime: this.editform.extime,
      };

      http
        .post(`/baoxiu/save_edit/${this.xiugaiobtain_id}`, data)
        .then((res) => {
          console.log(res);
          this.$message.success("修改成功");
          this.editdialog = false;
          this.getRepairList();
        })
        .catch((error) => {
          console.error("修改失败:", error);
          this.$message.error("修改失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 获取要修改的报修信息
    xiugaiobtain(row) {
      this.editdialog = true;
      this.xiugaiobtain_id = row.id;

      http
        .get(`/baoxiu/edit/${row.id}`)
        .then((response) => {
          console.log(response);
          const data = response.data || {};
          const userInfo = response.userInfo || {};
          this.editform = {
            mobile: data.mobile,
            urole: userInfo.utype,
            emtype: String(data.emtype),
            position: data.position,
            emimf: data.emimf,
            extime: data.extime,
            picture: [],
          };
        })
        .catch((error) => {
          console.error("获取报修信息失败:", error);
          this.$message.error("获取报修信息失败");
        });
    },

    // 状态修改方法
    updateStatus(status, message, type = "success") {
      this.$confirm(`确定要将状态修改为"${message}"吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;

          http
            .post(`/baoxiu/status/${this.xiugaiobtain_id}`, {
              status,
            })
            .then(() => {
              this.$message({
                type,
                message: `状态已修改为${message}`,
              });
              this.getRepairList();
              this.editdialog = false;
            })
            .catch((error) => {
              console.error("状态修改失败:", error);
              this.$message.error("状态修改失败");
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message.info("已取消修改");
        });
    },

    revoke() {
      this.updateStatus(-1, "撤销", "warning");
    },

    no_pass() {
      this.updateStatus(-2, "不通过", "error");
    },

    handling() {
      this.updateStatus(2, "处理中", "info");
    },

    pass() {
      this.updateStatus(1, "通过");
    },

    complete() {
      this.updateStatus(3, "完成");
    },

    // 指定工人
    toworkerfn(row) {
      this.dialogFormVisible = true;
      this.toworkerid = row.id;
      this.value_worker = row.worker;
    },

    ent_worker() {
      if (!this.value_worker) {
        this.$message.warning("请选择维修师傅");
        return;
      }

      this.loading = true;

      http
        .get(`/baoxiu/toworker/${this.toworkerid}`, {
          params: { workerid: this.value_worker },
        })
        .then(() => {
          this.$message.success("成功委派维修师傅");
          this.dialogFormVisible = false;
          this.getRepairList();
        })
        .catch((error) => {
          console.error("委派失败:", error);
          this.$message.error("委派失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 删除报修
    handleDelete(row) {
      this.$confirm("此操作将永久删除该报修申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;

          http
            .get(`/baoxiu/delete/${row.id}`)
            .then(() => {
              this.$message.success("删除成功");
              this.getRepairList();
            })
            .catch((error) => {
              console.error("删除失败:", error);
              this.$message.error("删除失败");
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    // 批量删除
    batchDelete() {
      if (this.selected.length === 0) {
        this.$message.warning("请先选择要删除的项");
        return;
      }

      this.$confirm(
        `确定要删除选中的 ${this.selected.length} 条报修申请吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.loading = true;

          const ids = this.selected.map((item) => item.id).join(",");

          http
            .get(`/baoxiu/deletes/${ids}`)
            .then(() => {
              this.$message.success("批量删除成功");
              this.getRepairList();
              this.toggleSelection();
            })
            .catch((error) => {
              console.error("批量删除失败:", error);
              this.$message.error("批量删除失败");
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    // 表格选择相关
    handleSelectionChange(val) {
      this.selected = val;
    },

    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },

    // 分页处理
    handleChangeSize(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      const hasSearch = Object.values(this.searchruleForm).some(
        (value) => value !== "" && value !== null
      );

      if (hasSearch) {
        this.searchusers();
      } else {
        this.getRepairList();
      }
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName === "addForm") {
        this.form.picture = [];
      }
    },
  },

  created() {
    this.allrole();
    this.getRepairList();
    this.getWorkerList();
  },
};
</script>

<style scoped>
.demo-drawer__content {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-date-editor,
.el-select,
.el-input,
.el-textarea {
  width: 100%;
}

.piliang {
  margin-top: 20px;
}

.el-drawer__body {
  overflow: auto;
}

.el-table {
  margin-top: 20px;
}

.el-pagination {
  margin-top: 20px;
}
</style>